<template>
  <div class="app-container" :class="{ 'dark-theme': isDarkTheme, 'menu-collapsed': isCollapsed }">
    <!-- 添加顶部工具栏 -->
    <div class="top-toolbar">
      <div class="flex items-center">
        <div class="logo-wrapper">
          <img src="@/assets/logo.svg" alt="Logo" class="logo-img" />
        </div>
        <span class="system-title">车辆管理系统</span>
      </div>
      
      <div class="flex items-center">
        <!-- 全屏按钮 -->
        <el-tooltip content="全屏" placement="bottom">
          <el-button circle @click="toggleFullScreen" class="toolbar-btn">
            <el-icon><FullScreen /></el-icon>
          </el-button>
        </el-tooltip>
        
        <!-- 主题切换 -->
        <el-tooltip :content="isDarkTheme ? '浅色模式' : '深色模式'" placement="bottom">
          <el-button circle @click="toggleTheme" class="toolbar-btn">
            <el-icon><Sunrise v-if="isDarkTheme" /><Moon v-else /></el-icon>
          </el-button>
        </el-tooltip>
        
        <div class="toolbar-divider"></div>
        
        <!-- 用户菜单 -->
        <el-dropdown trigger="click" @command="handleCommand">
          <div class="user-info-toolbar flex items-center cursor-pointer">
            <div class="avatar-wrapper">
              <span class="avatar-text">{{ userInfo.name ? userInfo.name.charAt(0) : 'U' }}</span>
            </div>
            <span class="mx-1 user-name">{{ userInfo.name || '系统管理员' }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="settings">系统设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    
    <el-container class="layout-container">
      <!-- 侧边栏 -->
      <el-aside :width="sidebarWidth" class="sidebar" :class="{ 'collapsed': isCollapsed }">
        <!-- 侧边栏头部 -->
        <div class="sidebar-header" @click="toggleCollapse">
          <div class="menu-toggle">
            <div class="toggle-icon" >
              <el-icon>
                <Fold v-if="!isCollapsed" />
                <Expand v-else />
              </el-icon>
            </div>
            <div class="toggle-text">
              <span>菜 单 栏</span>
            </div>
          </div>
        </div>
        
        <!-- 导航菜单 -->
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            :collapse="isCollapsed"
            :unique-opened="false"
            :collapse-transition="true"
            :router="true"
            :background-color="isDarkTheme ? '#1a1d2d' : '#ffffff'"
            :text-color="isDarkTheme ? '#ffffff' : '#303133'"
            :active-text-color="isDarkTheme ? '#4080e0' : '#0066cc'"
            @open="handleOpen"
            @mouseleave="handleMenuLeave"
            :default-openeds="openedMenus"
          >
            <el-menu-item index="/page" class="menu-item-hover no-before-line no-after-line">
              <el-icon><House /></el-icon>
              <span>首页信息</span>
            </el-menu-item>
            
            <!-- 信息管理 -->
            <el-sub-menu 
              index="/info" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/info')" 
              @mouseover="openSubMenu('/info')" 
              @focus="openSubMenu('/info')"
              @click.native="openSubMenu('/info')"
              @mousemove="openSubMenu('/info')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><Document /></el-icon>
                <span>信息管理</span>
              </template>
              <el-menu-item index="/info/vehicles" class="menu-item-hover">车辆信息</el-menu-item>
              <el-menu-item index="/info/drivers" class="menu-item-hover">驾驶员信息</el-menu-item>
              <el-menu-item index="/info/fuel-cards" class="menu-item-hover">加油卡信息</el-menu-item>
              <el-menu-item index="/info/etc-cards" class="menu-item-hover">ETC卡信息</el-menu-item>
              <el-menu-item index="/info/bindings" class="menu-item-hover">绑定关联</el-menu-item>
            </el-sub-menu>
            
            <!-- 充值记录 -->
            <el-sub-menu 
              index="/recharge" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/recharge')" 
              @mouseover="openSubMenu('/recharge')" 
              @focus="openSubMenu('/recharge')"
              @click.native="openSubMenu('/recharge')"
              @mousemove="openSubMenu('/recharge')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><Money /></el-icon>
                <span>充值记录</span>
              </template>
              <el-menu-item index="/recharge/fuel" class="menu-item-hover">加油卡充值记录</el-menu-item>
              <el-menu-item index="/recharge/etc" class="menu-item-hover">ETC卡充值记录</el-menu-item>
            </el-sub-menu>
            
            <!-- 使用记录 -->
            <el-sub-menu 
              index="/usage" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/usage')" 
              @mouseover="openSubMenu('/usage')" 
              @focus="openSubMenu('/usage')"
              @click.native="openSubMenu('/usage')"
              @mousemove="openSubMenu('/usage')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><Odometer /></el-icon>
                <span>使用记录</span>
              </template>
              <el-menu-item index="/usage/vehicle" class="menu-item-hover">出车记录</el-menu-item>
              <el-menu-item index="/usage/fuel" class="menu-item-hover">加油记录</el-menu-item>
              <el-menu-item index="/usage/etc" class="menu-item-hover">ETC通行记录</el-menu-item>
              <el-menu-item index="/usage/etc-parking" class="menu-item-hover">ETC通停记录</el-menu-item>
            </el-sub-menu>
 
            <!-- 交通记录 -->
            <el-sub-menu 
              index="/traffic" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/traffic')" 
              @mouseover="openSubMenu('/traffic')" 
              @focus="openSubMenu('/traffic')"
              @click.native="openSubMenu('/traffic')"
              @mousemove="openSubMenu('/traffic')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>交通记录</span>
              </template>
              <el-menu-item index="/traffic/violation" class="menu-item-hover">违章记录</el-menu-item>
              <el-menu-item index="/traffic/accident" class="menu-item-hover">事故记录</el-menu-item>
              <el-menu-item index="/traffic/insurance" class="menu-item-hover">保险记录</el-menu-item>
            </el-sub-menu>
            
            <!-- 保养记录 -->
            <el-sub-menu 
              index="/maintenance" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/maintenance')" 
              @mouseover="openSubMenu('/maintenance')" 
              @focus="openSubMenu('/maintenance')"
              @click.native="openSubMenu('/maintenance')"
              @mousemove="openSubMenu('/maintenance')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><Tools /></el-icon>
                <span>保养记录</span>
              </template>
              <el-menu-item index="/maintenance/service" class="menu-item-hover">保养记录</el-menu-item>
              <el-menu-item index="/maintenance/inspection" class="menu-item-hover">年检记录</el-menu-item>
              <el-menu-item index="/maintenance/repair" class="menu-item-hover">维修记录</el-menu-item>
            </el-sub-menu>
            
            <!-- 制度报表 -->
            <el-sub-menu 
              index="/reports" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/reports')" 
              @mouseover="openSubMenu('/reports')" 
              @focus="openSubMenu('/reports')"
              @click.native="openSubMenu('/reports')"
              @mousemove="openSubMenu('/reports')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><DataAnalysis /></el-icon>
                <span>数据分析</span>
              </template>
              <el-menu-item index="/reports/usage-analysis" class="menu-item-hover">车辆使用分析</el-menu-item>
              <el-menu-item index="/reports/cost-analysis" class="menu-item-hover">成本分析</el-menu-item>
              <el-menu-item index="/reports/traffic-accident" class="menu-item-hover">违章事故分析</el-menu-item>
              <el-menu-item index="/reports/maintenance-analysis" class="menu-item-hover">维护分析</el-menu-item>
            </el-sub-menu>
            
            <!-- 系统管理 -->
            <el-sub-menu 
              index="/system" 
              class="menu-item-hover auto-expand" 
              @mouseenter="openSubMenu('/system')" 
              @mouseover="openSubMenu('/system')" 
              @focus="openSubMenu('/system')"
              @click.native="openSubMenu('/system')"
              @mousemove="openSubMenu('/system')"
              :popper-class="isCollapsed ? 'hover-submenu-popper' : ''"
            >
              <template #title>
                <el-icon><Setting /></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="/system/users" class="menu-item-hover">用户管理</el-menu-item>
              <el-menu-item index="/system/logs" class="menu-item-hover">操作日志</el-menu-item>
              <el-menu-item index="/system/profile" class="menu-item-hover">个人信息</el-menu-item>
              <el-menu-item index="/system/settings" class="menu-item-hover">系统设置</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      
      <!-- 主要内容区 -->
      <el-container class="main-container">
        <!-- 头部导航 -->
        <el-header class="header">
          <!-- 移动端菜单按钮 -->
          <div class="mobile-menu-btn md:hidden" @click="toggleCollapse">
            <el-icon><Menu /></el-icon>
          </div>
          
          <el-breadcrumb class="breadcrumb mr-4" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        
        <!-- 内容区域 -->
        <el-main class="main-content">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
    
    <!-- 移动端菜单遮罩层 -->
    <div 
      class="menu-overlay" 
      v-if="!isCollapsed && isMobile" 
      @click="toggleCollapse"
    ></div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getUserInfo, removeToken, removeUserInfo } from '@/utils/auth'
import { 
  House, Document, Money, Odometer, TrendCharts, 
  Tools, DataAnalysis, Setting, ArrowDown, 
  Fold, Expand, Moon, Sunrise, FullScreen, Menu
} from '@element-plus/icons-vue'

export default {
  name: 'DefaultLayout',
  components: {
    House, Document, Money, Odometer, TrendCharts,
    Tools, DataAnalysis, Setting, ArrowDown,
    Fold, Expand, Moon, Sunrise, FullScreen, Menu
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const isCollapsed = ref(false)
    const isDarkTheme = ref(localStorage.getItem('theme') === 'dark')
    const openedMenus = ref([])
    const isMobile = ref(false)
    
    // 获取用户信息
    const userInfo = ref(getUserInfo() || {})
    
    // 计算侧边栏宽度
    const sidebarWidth = computed(() => {
      if (isCollapsed.value) {
        return '64px'
      }
      return isMobile.value ? '240px' : '240px'
    })
    
    // 切换菜单折叠状态
    const toggleCollapse = () => {
      isCollapsed.value = !isCollapsed.value
    }
    
    // 检测设备是否为移动端
    const checkIsMobile = () => {
      isMobile.value = window.innerWidth < 768
      // 在移动端自动折叠菜单
      if (isMobile.value) {
        isCollapsed.value = true
      }
    }
    
    // 监听窗口大小变化
    const handleResize = () => {
      checkIsMobile()
    }
    
    // 监听自定义菜单切换事件
    const handleToggleMenu = () => {
      toggleCollapse()
    }
    
    // 计算当前活动菜单
    const activeMenu = computed(() => {
      return route.path
    })
    
    // 计算当前应该打开的菜单
    const parentMenu = computed(() => {
      const path = route.path
      // 返回当前路由的父级路径
      if (path.startsWith('/info/')) return '/info'
      if (path.startsWith('/recharge/')) return '/recharge'
      if (path.startsWith('/usage/')) return '/usage'
      if (path.startsWith('/traffic/')) return '/traffic'
      if (path.startsWith('/maintenance/')) return '/maintenance'
      if (path.startsWith('/reports/')) return '/reports'
      if (path.startsWith('/system/')) return '/system'
      return ''
    })
    
    // 处理菜单展开
    const handleOpen = (key) => {
      if (!openedMenus.value.includes(key)) {
        openedMenus.value.push(key)
      }
    }
    
    // 添加一个防抖函数
    const debounce = (fn, delay) => {
      let timer = null
      return function(...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
          fn.apply(this, args)
        }, delay)
      }
    }

    // 当前处理中的菜单索引
    const processingMenuIndex = ref(null)
    // 记录当前打开的菜单
    const currentOpenedMenu = ref(null)

    // 带防抖的悬停打开子菜单
    const openSubMenuWithDelay = debounce((index) => {
      // 记录当前正在处理的菜单索引
      processingMenuIndex.value = index
      currentOpenedMenu.value = index
      
      // 无论是否折叠都自动展开子菜单
      // 不再关闭其他已打开的子菜单
      /*
      const allSubMenus = document.querySelectorAll('.el-sub-menu')
      allSubMenus.forEach(menuEl => {
        // 如果不是当前悬停的菜单且已经展开，则关闭它
        if (menuEl.getAttribute('index') !== index && menuEl.classList.contains('is-opened')) {
          const titleEl = menuEl.querySelector('.el-sub-menu__title')
          if (titleEl) {
            // 模拟点击关闭其他菜单
            const clickEvent = new MouseEvent('click', {
              bubbles: true,
              cancelable: true,
              view: window
            })
            titleEl.dispatchEvent(clickEvent)
          }
        }
      })
      */
      
      // 然后展开当前悬停的菜单
      const currentMenu = document.querySelector(`.el-sub-menu[index="${index}"]`)
      if (currentMenu) {
        // 判断菜单是否已经展开
        if (!currentMenu.classList.contains('is-opened')) {
          const submenuTitle = currentMenu.querySelector('.el-sub-menu__title')
          if (submenuTitle) {
            // 使用模拟鼠标点击事件展开子菜单
            const event = new MouseEvent('click', {
              bubbles: true,
              cancelable: true,
              view: window
            })
            submenuTitle.dispatchEvent(event)
          }
        }
      }
      
      // 处理完成后清除记录
      processingMenuIndex.value = null
    }, 10)

    // 添加一个菜单离开处理器
    const handleMenuLeave = debounce(() => {
      // 保持菜单展开状态，不关闭
      // 以下代码被注释以防止关闭菜单
      /*
      // 如果路由匹配当前打开的菜单，则不关闭
      if (parentMenu.value === currentOpenedMenu.value) {
        return
      }
      
      // 关闭当前打开的子菜单
      if (currentOpenedMenu.value) {
        const currentMenu = document.querySelector(`.el-sub-menu[index="${currentOpenedMenu.value}"]`)
        if (currentMenu && currentMenu.classList.contains('is-opened')) {
          const submenuTitle = currentMenu.querySelector('.el-sub-menu__title')
          if (submenuTitle) {
            const event = new MouseEvent('click', {
              bubbles: true,
              cancelable: true,
              view: window
            })
            submenuTitle.dispatchEvent(event)
          }
        }
        currentOpenedMenu.value = null
      }
      */
    }, 300)

    // 悬停时立即打开子菜单的函数
    const openSubMenu = (index) => {
      // 取消当前可能正在进行的防抖
      if (processingMenuIndex.value) {
        openSubMenuWithDelay.cancel && openSubMenuWithDelay.cancel()
      }
      
      // 记录当前处理的菜单
      processingMenuIndex.value = index
      currentOpenedMenu.value = index
      
      // 获取当前悬停的菜单元素
      const currentMenu = document.querySelector(`.el-sub-menu[index="${index}"]`)
      if (currentMenu) {
        // 判断菜单是否已经展开
        if (!currentMenu.classList.contains('is-opened')) {
          const submenuTitle = currentMenu.querySelector('.el-sub-menu__title')
          if (submenuTitle) {
            // 使用模拟点击事件立即展开菜单
            submenuTitle.click()
          }
        }
      }
    }
    
    // 计算面包屑
    const breadcrumbs = computed(() => {
      const result = []
      const matched = route.matched.filter(item => item.meta && item.meta.title)
      
      matched.forEach(item => {
        if (item.meta && item.meta.title && item.path !== '/') {
          result.push({
            path: item.path,
            title: item.meta.title
          })
        }
      })
      
      return result
    })
    
    // 切换主题
    const toggleTheme = () => {
      isDarkTheme.value = !isDarkTheme.value
      if (isDarkTheme.value) {
        document.documentElement.classList.add('dark-theme')
        localStorage.setItem('theme', 'dark')
      } else {
        document.documentElement.classList.remove('dark-theme')
        localStorage.setItem('theme', 'light')
      }
    }
    
    // 切换全屏
    const toggleFullScreen = () => {
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
    }
    
    // 处理菜单点击
    const handleCommand = (command) => {
      if (command === 'logout') {
        removeToken()
        removeUserInfo()
        router.push('/login')
      } else if (command === 'profile') {
        router.push('/system/profile')
      } else if (command === 'settings') {
        router.push('/system/settings')
      }
    }
    
    // 获取当前页面标题
    const getPageTitle = () => {
      const matched = route.matched.filter(item => item.meta && item.meta.title)
      if (matched.length > 0) {
        return matched[matched.length - 1].meta.title
      }
      return '首页'
    }
    
    // 获取最后一个面包屑标题（当前页面）
    const getLastBreadcrumb = () => {
      const matched = route.matched.filter(item => item.meta && item.meta.title)
      if (matched.length > 0) {
        return matched[matched.length - 1].meta.title
      }
      return '首页'
    }
    
    // 初始化主题和打开的菜单
    onMounted(() => {
      if (isDarkTheme.value) {
        document.documentElement.classList.add('dark-theme')
      } else {
        document.documentElement.classList.remove('dark-theme')
      }
      
      // 根据当前路由打开相应的菜单
      if (parentMenu.value) {
        openedMenus.value = [parentMenu.value]
        
        // 等待DOM渲染完成后，确保当前菜单高亮
        nextTick(() => {
          const parent = parentMenu.value
          if (parent) {
            const currentSubMenu = document.querySelector(`.el-sub-menu[index="${parent}"]`)
            if (currentSubMenu && !currentSubMenu.classList.contains('is-opened')) {
              const titleEl = currentSubMenu.querySelector('.el-sub-menu__title')
              if (titleEl) {
                titleEl.click()
              }
            }
          }
        })
      }

      // 为所有菜单项添加直接事件监听
      nextTick(() => {
        // 获取所有自动展开菜单
        const autoExpandMenus = document.querySelectorAll('.auto-expand')
        autoExpandMenus.forEach(menu => {
          const menuIndex = menu.getAttribute('index')
          if (menuIndex) {
            // 直接在DOM元素上添加事件监听
            menu.addEventListener('mouseenter', () => {
              openSubMenu(menuIndex)
            })
            menu.addEventListener('click', (e) => {
              // 防止事件冒泡，确保点击事件不被其他处理器捕获
              e.stopPropagation()
              openSubMenu(menuIndex)
            })
          }
        })
      })

      // 初始检测设备类型
      checkIsMobile()
      
      // 监听窗口大小变化
      window.addEventListener('resize', handleResize)
      
      // 监听自定义菜单切换事件
      window.addEventListener('toggle-menu', handleToggleMenu)
      
      // 检查URL中的menu参数
      const urlParams = new URLSearchParams(window.location.search)
      if (urlParams.get('menu') === 'collapsed') {
        isCollapsed.value = true
      }
    })
    
    // 监听路由变化，自动展开对应的菜单
    watch(() => route.path, (newPath) => {
      const parent = parentMenu.value
      if (parent) {
        // 确保菜单数组中有这个父菜单
        if (!openedMenus.value.includes(parent)) {
          openedMenus.value.push(parent)
        }
        
        // 等待DOM更新后，确保菜单项是展开的
        nextTick(() => {
          const currentSubMenu = document.querySelector(`.el-sub-menu[index="${parent}"]`)
          if (currentSubMenu && !currentSubMenu.classList.contains('is-opened')) {
            const titleEl = currentSubMenu.querySelector('.el-sub-menu__title')
            if (titleEl) {
              titleEl.click()
            }
          }
          
          // 移除关闭其他非相关菜单的代码，允许多个菜单同时展开
          // 以下代码被注释以防止关闭其他菜单
          /*
          const allSubMenus = document.querySelectorAll('.el-sub-menu')
          allSubMenus.forEach(menuEl => {
            const menuIndex = menuEl.getAttribute('index')
            if (menuIndex !== parent && menuEl.classList.contains('is-opened')) {
              const titleEl = menuEl.querySelector('.el-sub-menu__title')
              if (titleEl) {
                titleEl.click()
              }
            }
          })
          */
        })
      }
    })
    
    // 在组件卸载时移除事件监听
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
      window.removeEventListener('toggle-menu', handleToggleMenu)
    })
    
    return {
      isCollapsed,
      isDarkTheme,
      userInfo,
      activeMenu,
      parentMenu,
      breadcrumbs,
      openedMenus,
      isMobile,
      sidebarWidth,
      toggleTheme,
      toggleFullScreen,
      handleCommand,
      handleOpen,
      openSubMenu,
      handleMenuLeave,
      toggleCollapse
    }
  }
}
</script>

<style scoped>
/* ======== 清理样式，重新设置 ======== */

/* 所有菜单项的基础样式 */
.el-menu {
  border-right: none;
  transition: width 0.3s;
}

.el-menu-item, 
.el-sub-menu__title {
  height: 45px !important;
  line-height: 45px !important;
  font-size: 14px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 一级菜单项样式 */
.el-menu > .el-menu-item,
.el-menu > .el-sub-menu > .el-sub-menu__title {
  margin: 4px 8px;
  border-radius: 6px;
  padding: 0 16px !important;
  display: flex;
  align-items: center;
}

/* 一级菜单悬停效果 */
.el-menu > .el-menu-item:hover, 
.el-menu > .el-sub-menu > .el-sub-menu__title:hover {
  background-color: #f5f8ff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.dark-theme .el-menu > .el-menu-item:hover, 
.dark-theme .el-menu > .el-sub-menu > .el-sub-menu__title:hover {
  background-color: #242736 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 二级菜单项悬停效果 */
.el-menu--inline .el-menu-item {
  padding-left: 44px !important;
  margin: 2px 8px;
  height: 40px !important;
  line-height: 40px !important;
  border-radius: 6px;
}

.el-menu--inline .el-menu-item:hover {
  background-color: #f6f9ff !important;
  transform: translateX(2px);
}

.dark-theme .el-menu--inline .el-menu-item:hover {
  background-color: #242736 !important;
}

/* 菜单图标样式 */
.el-menu-item .el-icon,
.el-sub-menu__title .el-icon {
  margin-right: 10px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}

/* 菜单文本样式 */
.el-menu-item span,
.el-sub-menu__title span {
  vertical-align: middle;
}

/* 折叠时的菜单样式 */
.sidebar {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  height: calc(100% - 0px);
  overflow-y: hidden;
  background-color: white;
  z-index: 10;
  border-right: 1px solid #f0f2f5;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.05);
  width: 220px !important;
}

.dark-theme .sidebar {
  background-color: #1a1d2d;
  border-right: 1px solid #2d3348;
  box-shadow: 1px 0 5px rgba(0, 0, 0, 0.25);
}

.sidebar.collapsed {
  width: 64px !important;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
 
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.dark-theme .sidebar-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}

.sidebar.collapsed .toggle-text {
  display: none;
}

/* 左侧蓝条高亮效果 */
.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: #409eff;
  border-radius: 0 2px 2px 0;
}

.dark-theme .el-menu-item.is-active::before {
  background-color: #5b8af5;
}

/* 特定菜单项移除左侧蓝色边框 */
.el-menu-item.no-before-line.is-active::before {
  display: none;
}

/* 菜单项基础样式 */
.el-menu-item, 
.el-sub-menu .el-menu-item,
.el-sub-menu__title {
  height: 45px;
  line-height: 45px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-size: 14px;
  font-weight: 400;
  padding: 0 20px !important;
  position: relative;
  display: flex;
  align-items: center;
  margin: 2px 8px;
  border-radius: 6px;
}

/* 菜单项悬停效果 */
.el-menu-item:hover, 
.el-sub-menu__title:hover {
  background-color: #f0f7ff !important;
  color: #66b1ff !important;
  transform: translateY(-1px);
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.1);
}

.dark-theme .el-menu-item:hover, 
.dark-theme .el-sub-menu__title:hover {
  background-color: #242736 !important;
  color: #79bbff !important;
  box-shadow: 0 2px 6px rgba(91, 138, 245, 0.15);
}

/* 子菜单样式 */
.el-menu--inline .el-menu-item {
  padding-left: 44px !important;
  margin-left: 4px !important;
  margin-right: 4px !important;
}

/* 子菜单活动项样式 */
.el-menu--inline .el-menu-item.is-active {
  padding-left: 44px !important;
}

/* 修复选中子菜单的标题样式 */
.el-menu > .el-sub-menu.is-active > .el-sub-menu__title {
  color: #0066cc !important;
  font-weight: 600;
  text-shadow: 0 0 1px rgba(0, 102, 204, 0.4);
  letter-spacing: 0.3px;
}

.dark-theme .el-menu > .el-sub-menu.is-active > .el-sub-menu__title {
  color: #4080e0 !important;
  text-shadow: 0 0 1px rgba(64, 128, 224, 0.4);
}

/* 当子菜单被选中时，父菜单高亮 */
.el-sub-menu.is-active > .el-sub-menu__title {
  color: #0066cc !important;
  font-weight: 600 !important;
  background-color: #f0f7ff !important;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.dark-theme .el-sub-menu.is-active > .el-sub-menu__title {
  color: #4080e0 !important;
  background-color: rgba(64, 128, 224, 0.15) !important;
  box-shadow: 0 2px 8px rgba(64, 128, 224, 0.15);
}

/* 当子菜单被选中时，父菜单图标和文字高亮 */
.el-sub-menu.is-active > .el-sub-menu__title .el-icon,
.el-sub-menu.is-active > .el-sub-menu__title span {
  color: #0066cc !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
}

.dark-theme .el-sub-menu.is-active > .el-sub-menu__title .el-icon,
.dark-theme .el-sub-menu.is-active > .el-sub-menu__title span {
  color: #4080e0 !important;
  font-weight: 600 !important;
}

/* 图标缩放效果 */
.el-sub-menu.is-active > .el-sub-menu__title .el-icon {
  transform: scale(1.1);
}

/* 增加文字亮度，使其更加醒目 */
.el-sub-menu.is-active > .el-sub-menu__title span {
  text-shadow: 0 0 1px rgba(0, 102, 204, 0.5);
  letter-spacing: 0.3px;
}

.dark-theme .el-sub-menu.is-active > .el-sub-menu__title span {
  text-shadow: 0 0 1px rgba(64, 128, 224, 0.5);
  letter-spacing: 0.3px;
}

/* 确保子菜单项的悬停效果正确 */
.el-menu--popup .el-menu-item:hover {
  background-color: #f5f8ff !important;
  color: #66b1ff !important;
}

.dark-theme .el-menu--popup .el-menu-item:hover {
  background-color: #242736 !important;
  color: #79bbff !important;
}

/* 子菜单项选中状态 */
.el-menu-item.is-active {
  color: #0066cc !important;
  font-weight: 600 !important;
  background-color: #ecf5ff !important;
}

.dark-theme .el-menu-item.is-active {
  color: #4080e0 !important;
  background-color: rgba(64, 128, 224, 0.2) !important;
}

/* 箭头悬停颜色 */
.auto-expand:hover > .el-sub-menu__title::after {
  border-color: #66b1ff transparent transparent transparent;
  opacity: 1;
  transform: translateY(2px);
}

.dark-theme .auto-expand:hover > .el-sub-menu__title::after {
  border-color: #79bbff transparent transparent transparent;
}

/* 菜单过渡动画 */
.el-menu-item, 
.el-sub-menu__title {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 增强一级菜单悬停效果 */
.el-menu > .el-menu-item:hover, 
.el-menu > .el-sub-menu > .el-sub-menu__title:hover {
  background-color: #f5f8ff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.dark-theme .el-menu > .el-menu-item:hover, 
.dark-theme .el-menu > .el-sub-menu > .el-sub-menu__title:hover {
  background-color: #242736 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 增强子菜单弹出效果 */
.el-menu--popup {
  min-width: 160px !important;
  padding: 5px 0 !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important;
  animation: menu-fade-in 0.2s ease-out !important;
}

@keyframes menu-fade-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 修复暗黑模式下弹出菜单的样式 */
.dark-theme .el-menu--popup {
  background-color: #1a1d2d !important;
  border: 1px solid #2d3348 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25) !important;
}

/* 活动菜单状态增强 */
.el-menu-item.is-active,
.el-sub-menu.is-active > .el-sub-menu__title {
  position: relative;
  overflow: hidden;
}

/* 移除所有菜单项选中时的底部横线 */
.el-menu-item.is-active::after,
.el-sub-menu.is-active > .el-sub-menu__title::after {
  display: none; /* 完全移除底部横线 */
}

/* 移除特定菜单项底部线条 */
.el-menu-item.no-after-line.is-active::after {
  display: none;
}

.dark-theme .el-menu-item.is-active::after,
.dark-theme .el-sub-menu.is-active > .el-sub-menu__title::after {
  background-color: #4080e0;
}

/* 改变弹出菜单的过渡效果 */
.el-menu--popup-container {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hover-submenu-popper .el-menu--popup {
  padding: 6px 0 !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15) !important; 
}

.dark-theme .hover-submenu-popper .el-menu--popup {
  background-color: #1a1d2d !important;
  border: 1px solid #2d3348 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 添加左侧高亮条效果 */
.el-sub-menu.is-active > .el-sub-menu__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background-color: #409eff;
  border-radius: 0 2px 2px 0;
}

.dark-theme .el-sub-menu.is-active > .el-sub-menu__title::before {
  background-color: #5b8af5;
}

/* 自动展开菜单样式 */
.auto-expand {
  cursor: pointer;
  position: relative;
  z-index: 5;
}

.auto-expand > .el-sub-menu__title {
  transition: all 0.15s ease-in-out !important;
}

.auto-expand:hover > .el-sub-menu__title,
.auto-expand.is-active > .el-sub-menu__title {
  background-color: #f0f7ff !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  border-left: 3px solid #409eff;
  padding-left: 17px !important;
}

.dark-theme .auto-expand:hover > .el-sub-menu__title,
.dark-theme .auto-expand.is-active > .el-sub-menu__title {
  background-color: rgba(91, 138, 245, 0.15) !important;
  border-left: 3px solid #5b8af5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 增强子菜单图标和文本的高亮效果 */
.auto-expand:hover > .el-sub-menu__title .el-icon,
.auto-expand:hover > .el-sub-menu__title span {
  color: #66b1ff !important;
  transform: translateX(1px);
  font-weight: 500;
}

.dark-theme .auto-expand:hover > .el-sub-menu__title .el-icon,
.dark-theme .auto-expand:hover > .el-sub-menu__title span {
  color: #79bbff !important;
}

/* 自定义子菜单弹出效果 */
.el-menu--popup {
  border-radius: 6px !important;
  overflow: hidden;
  animation: menu-popup 0.2s ease-out forwards;
  transform-origin: top center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.dark-theme .el-menu--popup {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

@keyframes menu-popup {
  0% {
    transform: scaleY(0.8);
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 覆盖Element UI默认的菜单过渡行为 */
.el-menu-item, 
.el-sub-menu__title,
.el-menu--popup,
.el-menu,
.el-sub-menu {
  transition: all 0.2s ease-out !important;
}

/* 为子菜单添加箭头指示器 */
.auto-expand > .el-sub-menu__title::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #909399 transparent transparent transparent;
  transition: all 0.15s ease-in-out;
  opacity: 0.6;
}

.dark-theme .auto-expand > .el-sub-menu__title::after {
  border-color: #a0a3b1 transparent transparent transparent;
}

.auto-expand:hover > .el-sub-menu__title::after {
  border-color: #409eff transparent transparent transparent;
  opacity: 1;
  transform: translateY(2px);
}

.dark-theme .auto-expand:hover > .el-sub-menu__title::after {
  border-color: #5b8af5 transparent transparent transparent;
}

/* 折叠状态下隐藏箭头 */
.sidebar.collapsed .auto-expand > .el-sub-menu__title::after {
  display: none;
}

.top-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 24px;
  background-color: #fff;
  border-bottom: 1px solid #eaedf1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  z-index: 100;
  position: relative;
  transition: all 0.3s ease;
}

.dark-theme .top-toolbar {
  background-color: #1a1d2d;
  border-bottom: 1px solid #2d3348;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.logo-wrapper {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.logo-img {
  height: 36px;
  width: auto;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.system-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-left: 14px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.dark-theme .system-title {
  color: #fff;
}

.toolbar-btn {
  margin: 0 6px;
  background: transparent;
  border: none;
  font-size: 20px;
  color: #606266;
  transition: all 0.3s ease;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.toolbar-btn:hover {
  color: #409eff;
  transform: scale(1.05);
  background-color: rgba(64, 158, 255, 0.1);
}

.dark-theme .toolbar-btn {
  color: #a6a7ab;
}

.dark-theme .toolbar-btn:hover {
  color: #5b8af5;
  background-color: rgba(91, 138, 245, 0.15);
}

.toolbar-divider {
  height: 28px;
  width: 1px;
  background-color: #e0e0e0;
  margin: 0 18px;
  transition: all 0.3s ease;
}

.dark-theme .toolbar-divider {
  background-color: #42485f;
}

.user-info-toolbar {
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-info-toolbar:hover {
  background-color: rgba(64, 158, 255, 0.1);
}

.dark-theme .user-info-toolbar:hover {
  background-color: rgba(91, 138, 245, 0.15);
}

.avatar-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

.dark-theme .avatar-wrapper {
  background-color: #5b8af5;
  box-shadow: 0 2px 8px rgba(91, 138, 245, 0.35);
}

.avatar-text {
  color: white;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.user-name {
  font-size: 15px;
  color: #333;
  margin: 0 10px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.dark-theme .user-name {
  color: #d8d8d8;
}

 .header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  background-color: #f5f7fa;
   /* background-color: #fff; */
  /* border-bottom: 1px solid #eaedf1;  */
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  margin-bottom: 0;
} 

.dark-theme .header {
  /* background-color: #1a1d2d; */
   background-color: #111421;
  /* border-bottom: 1px solid #2d3348; */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumb {
  line-height: 50px;
  font-size: 14px;
}

.main-content {
  padding: 16px 20px;
  background-color: #f5f7fa;
  overflow-y: auto;
}

.dark-theme .main-content {
  background-color: #111421;
}

.app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.layout-container {
  height: calc(100% - 70px);
  overflow: hidden;
}

/* 折叠时的菜单样式 */
.sidebar.collapsed .el-menu--collapse {
  width: 64px !important;
  border-right: none;
}

/* 折叠时隐藏文字 */
.sidebar.collapsed .el-menu--collapse .el-menu-item span,
.sidebar.collapsed .el-menu--collapse .el-sub-menu__title span {
  display: none !important;
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* 折叠时图标居中 */
.sidebar.collapsed .el-menu--collapse .el-menu-item .el-icon,
.sidebar.collapsed .el-menu--collapse .el-sub-menu__title .el-icon {
  margin: 0 auto !important;
  width: 24px;
  font-size: 18px;
  transition: all 0.3s;
}

/* 折叠时菜单项样式 */
.sidebar.collapsed .el-menu--collapse .el-menu-item,
.sidebar.collapsed .el-menu--collapse .el-sub-menu__title {
  padding: 0 !important;
  text-align: center;
  display: flex;
  justify-content: center;
}

/* 折叠时活动菜单的样式 */
.sidebar.collapsed .el-sub-menu.is-active .el-sub-menu__title,
.sidebar.collapsed .el-menu-item.is-active {
  margin: 2px 4px;
  border-radius: 6px;
}

.sidebar.collapsed .el-menu-item.is-active::before {
  width: 4px;
  height: 40%;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.collapsed .el-menu-item.is-active {
  background-color: #ecf5ff !important;
  color: #409eff !important;
  font-weight: 600;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  font-size: 24px;
  cursor: pointer;
  margin-right: 15px;
}

/* 移动端菜单遮罩层 */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
  display: none;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
    align-items: center;
  }
  
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  
  .sidebar.collapsed {
    transform: translateX(-100%);
  }
  
  .app-container:not(.menu-collapsed) .sidebar {
    transform: translateX(0);
  }
  
  .app-container:not(.menu-collapsed) .menu-overlay {
    display: block;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding-left: 10px !important;
  }
  
  .breadcrumb {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style> 